feat(apollo-wind): add Core/HC editor themes and expand Code Editors patterns page by 1980computer · Pull Request #772 · UiPath/apollo-ui

1980computer · 2026-06-03T16:12:58Z

Summary

This PR has two parts:

1. New editor theme objects for Monaco and CodeMirror

Packages all six Apollo theme variants as static hex objects that Monaco and CodeMirror can consume at registration time. No new colors — these are direct extractions of existing Apollo semantic CSS tokens from theme-variables.css.

New exports from @uipath/apollo-wind/editor-themes:

Theme	Monaco	CodeMirror
Core Dark	`apolloCoreDarkMonaco` ✨	`apolloCoreDarkCodeMirror` ✨
Core Light	`apolloCoreLightMonaco` ✨	`apolloCoreLightCodeMirror` ✨
Core Dark HC	`apolloCoreDarkHCMonaco` ✨	`apolloCoreDarkHCCodeMirror` ✨
Core Light HC	`apolloCoreLightHCMonaco` ✨	`apolloCoreLightHCCodeMirror` ✨
Future Dark	`apolloFutureDarkMonaco` (existing)	`apolloFutureDarkCodeMirror` (existing)
Future Light	`apolloFutureLightMonaco` (existing)	`apolloFutureLightCodeMirror` (existing)

Also completes the CSS custom property integration for future-dark and future-light CodeBlock themes — all five chrome values now pull from Apollo design tokens.

Type rename: ApolloFutureCodeMirrorTheme → ApolloCodeMirrorTheme — the type is shared across all theme families so the "Future" qualifier was misleading.

Package notes:

Monaco and CodeMirror packages removed from peerDependencies — editor-themes exports are pure data objects with no runtime imports
Monaco theme registration guarded at module level to prevent redundant defineTheme calls across multiple editor instances
Export names stored directly on editorThemeConfigs entries (e.g. apolloCoreDarkHCMonaco) — no string derivation that could produce wrong names
File-level docstrings updated in monaco.ts and codemirror.ts to reflect all three theme families (Future, Core, Core HC)

2. Expanded Code Editors patterns page in Storybook

Replaces the minimal CodeBlock story with a full documentation section under Patterns → Code Editors. Renamed to code-editors.stories.tsx.

Overview — "When to use what" decision table, orchestrator pattern cards, and a capability comparison table (Monaco vs CodeMirror across 10 dimensions)
Editor Monaco — tabbed view: Full Editor / Compact Editor / Input Editor (toggle between plain text input and Monaco at 120px)
Editor CodeMirror — same tab structure with CodeMirror equivalents
Themes — Core → Core HC → Future ordering; each card shows a StaticMonacoPreview alongside a live CodeMirror preview, plus a collapsible Token reference panel with syntax/UI color swatches and a ready-to-copy import snippet (with correct export names and import * as monaco line)

Test plan

Visit http://localhost:6007 → Patterns → Code Editors
Overview: confirm three sections render — orchestrator pattern, capability comparison table, when-to-use table
Editor Monaco: toggle between Full / Compact / Input tabs — verify editors load and Input toggle works
Editor CodeMirror: same tab checks; verify Input toggle syncs value back on collapse
Themes: expand "Token reference" on Core Dark HC — verify export names show apolloCoreDarkHCMonaco / apolloCoreDarkHCCodeMirror and import snippet includes import * as monaco from 'monaco-editor'
Confirm no CI failures

🤖 Generated with Claude Code

github-actions · 2026-06-03T16:13:11Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Review	Updated (PT)
apollo-design	🟢 Ready	Preview, Logs	Jun 16, 2026, 06:06:30 PM
apollo-docs	🟢 Ready	Preview, Logs	Jun 16, 2026, 06:06:30 PM
apollo-landing	🟢 Ready	Preview, Logs	Jun 16, 2026, 06:06:30 PM
apollo-vertex	🟢 Ready	Preview, Logs	Jun 16, 2026, 06:06:30 PM

github-actions · 2026-06-03T16:13:57Z

Dependency License Review

✅ 1938 package(s) scanned
✅ No license issues found
⚠️ 2 package(s) excluded (see details below)

License distribution

License	Packages
MIT	1708
ISC	89
Apache-2.0	55
BSD-3-Clause	27
BSD-2-Clause	23
BlueOak-1.0.0	8
MPL-2.0	4
MIT-0	3
CC0-1.0	3
MIT OR Apache-2.0	2
(MIT OR Apache-2.0)	2
Unlicense	2
LGPL-3.0-or-later	1
Python-2.0	1
CC-BY-4.0	1
(MPL-2.0 OR Apache-2.0)	1
Unknown	1
Artistic-2.0	1
(WTFPL OR MIT)	1
(BSD-2-Clause OR MIT OR Apache-2.0)	1
CC-BY-3.0	1
0BSD	1
(MIT OR CC0-1.0)	1
MIT AND ISC	1

Excluded packages

Package	Version	License	Reason
@img/sharp-libvips-linux-x64	1.2.4	LGPL-3.0-or-later	LGPL pre-built binary, not linked
khroma	2.1.0	Unknown	MIT per GitHub repo, missing license field in package.json

Copilot

Pull request overview

This PR completes the token-based theming for the CodeBlock component’s future-dark and future-light variants by replacing remaining hardcoded hex colors with semantic CSS custom properties, aligning these themes with how Apollo Wind’s semantic tokens are intended to adapt across theme definitions.

Changes:

Updated future-dark theme colors (headerBg, labelColor, iconColor, lineNumberColor) to use semantic CSS variables.
Updated future-light theme colors similarly, including switching headerBg to --surface-overlay to ensure header/body separation.

Copilot

Pull request overview

Copilot reviewed 1 out of 1 changed files in this pull request and generated 3 comments.

Copilot

Pull request overview

Copilot reviewed 1 out of 1 changed files in this pull request and generated 4 comments.

Copilot

Pull request overview

Copilot reviewed 6 out of 7 changed files in this pull request and generated 7 comments.

Files not reviewed (1)

pnpm-lock.yaml: Language not supported

Copilot

Pull request overview

Copilot reviewed 12 out of 15 changed files in this pull request and generated 6 comments.

Files not reviewed (1)

pnpm-lock.yaml: Generated file

1980computer

All Copilot comments addressed in the latest push. Ready for re-review.

Copilot

Pull request overview

Copilot reviewed 12 out of 15 changed files in this pull request and generated 5 comments.

Files not reviewed (1)

pnpm-lock.yaml: Generated file

Copilot

Pull request overview

Copilot reviewed 12 out of 15 changed files in this pull request and generated 5 comments.

Files not reviewed (1)

pnpm-lock.yaml: Generated file

Copilot

Pull request overview

Copilot reviewed 12 out of 15 changed files in this pull request and generated 2 comments.

Files not reviewed (1)

pnpm-lock.yaml: Generated file

Copilot

Pull request overview

Copilot reviewed 12 out of 15 changed files in this pull request and generated 3 comments.

Files not reviewed (1)

pnpm-lock.yaml: Generated file

…patterns page - Add Monaco and CodeMirror theme objects for all 6 Apollo themes (future-dark, future-light, dark, light, dark-hc, light-hc) — each is a static extraction of existing Apollo semantic tokens, no new colors introduced - Export all 12 new theme objects from @uipath/apollo-wind/editor-themes - Rewrite Code Editors stories with 3 usage patterns per editor (Full, Compact, Input toggle) and live previews for all theme variants on the Themes page Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Copilot AI review requested due to automatic review settings June 3, 2026 16:12

Copilot started reviewing on behalf of 1980computer June 3, 2026 16:13 View session

github-actions Bot added pkg:apollo-wind size:S 10-29 changed lines. labels Jun 3, 2026

Copilot AI reviewed Jun 3, 2026

View reviewed changes

1980computer force-pushed the fix/code-block-themes branch from 7bf506c to 4bc30df Compare June 4, 2026 14:24

Copilot AI review requested due to automatic review settings June 4, 2026 14:31

1980computer force-pushed the fix/code-block-themes branch from 4bc30df to 805c054 Compare June 4, 2026 14:31

Copilot started reviewing on behalf of 1980computer June 4, 2026 14:31 View session

github-actions Bot added size:L 100-499 changed lines. and removed size:S 10-29 changed lines. labels Jun 4, 2026

Copilot AI reviewed Jun 4, 2026

View reviewed changes

Comment thread packages/apollo-wind/src/components/ui/code-block.tsx Outdated

Comment thread packages/apollo-wind/src/components/ui/code-block.tsx Outdated

Comment thread packages/apollo-wind/src/components/ui/code-block.tsx Outdated

1980computer force-pushed the fix/code-block-themes branch 2 times, most recently from f20ed45 to 5f7aed8 Compare June 4, 2026 14:42

Copilot AI review requested due to automatic review settings June 4, 2026 14:42

Copilot started reviewing on behalf of 1980computer June 4, 2026 14:42 View session

Copilot AI reviewed Jun 4, 2026

View reviewed changes

1980computer force-pushed the fix/code-block-themes branch from 5f7aed8 to c184c3b Compare June 4, 2026 14:56

github-actions Bot added size:XL 500-999 changed lines. and removed size:L 100-499 changed lines. labels Jun 4, 2026

github-code-quality Bot found potential problems Jun 4, 2026

View reviewed changes

Comment thread packages/apollo-wind/src/components/ui/code-editors.stories.tsx Fixed

github-advanced-security AI found potential problems Jun 4, 2026

View reviewed changes

Comment thread packages/apollo-wind/src/components/ui/code-editors.stories.tsx Fixed

Copilot AI review requested due to automatic review settings June 4, 2026 15:24

Copilot started reviewing on behalf of 1980computer June 4, 2026 15:24 View session

Copilot AI reviewed Jun 4, 2026

View reviewed changes

1980computer force-pushed the fix/code-block-themes branch 2 times, most recently from bea8f52 to 936dd79 Compare June 12, 2026 17:27

github-actions Bot added the app:storybook label Jun 12, 2026

1980computer force-pushed the fix/code-block-themes branch from de02d9e to 75e32bf Compare June 16, 2026 23:46

github-code-quality Bot found potential problems Jun 16, 2026

View reviewed changes

Comment thread packages/apollo-wind/src/components/ui/code-editors.stories.tsx Fixed

github-advanced-security AI found potential problems Jun 16, 2026

View reviewed changes

Comment thread packages/apollo-wind/src/components/ui/code-editors.stories.tsx Fixed

1980computer marked this pull request as ready for review June 16, 2026 23:59

Copilot AI review requested due to automatic review settings June 16, 2026 23:59

Copilot started reviewing on behalf of 1980computer June 17, 2026 00:00 View session

Copilot AI reviewed Jun 17, 2026

View reviewed changes

1980computer force-pushed the fix/code-block-themes branch from 75e32bf to 7288543 Compare June 17, 2026 00:07

Copilot AI review requested due to automatic review settings June 17, 2026 00:09

1980computer force-pushed the fix/code-block-themes branch from 7288543 to d75227e Compare June 17, 2026 00:09

Copilot started reviewing on behalf of 1980computer June 17, 2026 00:10 View session

1980computer force-pushed the fix/code-block-themes branch from d75227e to c7df4bd Compare June 17, 2026 00:11

1980computer commented Jun 17, 2026

View reviewed changes

Copilot AI reviewed Jun 17, 2026

View reviewed changes

Copilot AI review requested due to automatic review settings June 17, 2026 00:15

1980computer force-pushed the fix/code-block-themes branch from c7df4bd to 6890f9b Compare June 17, 2026 00:15

Copilot started reviewing on behalf of 1980computer June 17, 2026 00:16 View session

1980computer force-pushed the fix/code-block-themes branch from 6890f9b to b7e3265 Compare June 17, 2026 00:20

Copilot AI reviewed Jun 17, 2026

View reviewed changes

Copilot AI review requested due to automatic review settings June 17, 2026 00:33

1980computer force-pushed the fix/code-block-themes branch from b7e3265 to 8d78161 Compare June 17, 2026 00:33

Copilot started reviewing on behalf of 1980computer June 17, 2026 00:34 View session

Copilot AI reviewed Jun 17, 2026

View reviewed changes

Comment thread packages/apollo-wind/src/components/ui/code-editors.stories.tsx

Comment thread packages/apollo-wind/src/components/ui/code-editors.stories.tsx Outdated

1980computer force-pushed the fix/code-block-themes branch from 8d78161 to 2f3fae9 Compare June 17, 2026 00:40

Copilot AI review requested due to automatic review settings June 17, 2026 00:48

1980computer force-pushed the fix/code-block-themes branch from 2f3fae9 to fb216a9 Compare June 17, 2026 00:48

Copilot started reviewing on behalf of 1980computer June 17, 2026 00:48 View session

Copilot AI reviewed Jun 17, 2026

View reviewed changes

Comment thread packages/apollo-wind/src/index.ts

Comment thread packages/apollo-wind/package.json

Comment thread packages/apollo-wind/package.json

1980computer force-pushed the fix/code-block-themes branch from fb216a9 to 4b07837 Compare June 17, 2026 01:00

Conversation

1980computer commented Jun 3, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

1. New editor theme objects for Monaco and CodeMirror

2. Expanded Code Editors patterns page in Storybook

Test plan

Uh oh!

github-actions Bot commented Jun 3, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions Bot commented Jun 3, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Dependency License Review

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

1980computer left a comment

Choose a reason for hiding this comment

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

1980computer commented Jun 3, 2026 •

edited

Loading

github-actions Bot commented Jun 3, 2026 •

edited

Loading

github-actions Bot commented Jun 3, 2026 •

edited

Loading